<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <!--<link rel="stylesheet" href="public/lib/font-awesome.css"/>-->
    <!--<link rel="stylesheet" href="public/lib/fonts-hna.css"/>-->
    <!--<link rel="stylesheet" href="public/common/main.css"/>-->
    <link rel="stylesheet" href="loadAssets.php?urls=public/lib/font-awesome.css,public/lib/fonts-hna.css,public/common/minify/main.css" />
    <script src="public/lib/html2canvas.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini language-swich fixed">
    <header class="header">
        <a href="javascript:;" class="logo">
            <span class="logo-mini" style="display: none;">HNA</span>
            <img src="public/img/sanzang.png">
        </a>

        <nav class="navbar">
            <a data-toggle="offcanvas" ng-click="silderToggle($event);" href="javascript:void(0);" class="sidebar-toggle icon-reorder" role="button"></a>
        </nav>

        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
                <li id="user-info" class="dropdown user user-menu" style="display:none;">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <img class="user-image">
                        <span style="margin:0px 5px;"></span>
                        <i class="icon-angle-down header-icon"></i>
                    </a>
                    <ul class="dropdown-menu user-main">
                        <li class="user-footer" id="updatepd">
                            <i class="fna-icon icon-Password"></i>
                            更改密码
                        </li>
                        <li class="user-footer" id="logout">
                            <i class="fna-icon icon-Sign-out"></i>
                            退出账号
                        </li>

                    </ul>
                </li>

                <li style="margin-right:35px;" id="language" class="dropdown messages-menu">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <img src="public/img/lang-zh-CN.png" class="image" width="29" height="21"/>
                        <span style="margin:0px 5px;" class="hidden-xs"></span>
                        <i class="fa icon-angle-down header-icon"></i>
                    </a>
                    <ul class="dropdown-menu language-main">
                        <li ng-class="{'active':frameModel.currentLang == key, 'language':true}" ng-click="frameModel.switchLang(key);" ng-repeat="(key,value) in frameModel.langLibrary">
                            <img ng-src="public/img/lang-{{key}}.png" class="image" width="29" height="21"/>
                            {{value}}
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>

    <aside class="menu-sidebar" data-toggle="leaveAside" ng-mouseleave="silderToggle($event);">
        <section class="sidebar">
            <ul class="sidebar-menu" id="menu"></ul>
        </section>
    </aside>

    <div id="iframe-box" style="position:absolute;width:100%;height:100%;border:none;top:0;left:0;z-index:1000;padding:0;">
        <iframe name="iframe" id="iframe" style="width:100%;height:100%;border:none;padding:0" frameborder="0" scrolling="no"></iframe>
    </div>

    <!--图片模板预览start-->
    <div style="overflow-y:scroll;position:absolute;top:0;left:0;width:100%;height:100%;z-index:100000;display:none" id="tplPreview">
        <style>
            .container {
                box-shadow:0 1px 3px rgba(34,25,25,.4);
                background-color:#fff;
            }
            .download-box {
                position:fixed;
                width:176px;
                height: 30px;
                right:24px;
                top:12px;
            }
            .download-box .btn {
                width:80px;
                height:30px;
                background-color:#3BAFDA;
                color:#fff;
                line-height:30px;
                border:none;
                box-shadow:0 1px 3px rgba(34,25,25,.4);
                border-radius:3px;
            }
            .download-box .close-btn {
                margin-left:10px;
                background-color:#fdfcfc;
                border:1px solid #a2a0a0;
                color:#999;
            }
            .download-box .btn:hover {
                opacity:0.9;
            }
        </style>
        <div class="download-box">
            <button class="btn" id="build-template">生成</button>
            <button class="btn close-btn" id="close-preview-template">关闭</button>
        </div>
        <div id="mask" style="position:absolute;top:0;left:0;width:100%;height:200%;z-index:-1;background-color:#edece9;opacity:0.99"><div>
    </div>
    <!--图片模板预览end-->

    <!--<script src="public/lib/jquery.js"></script>-->
    <!--<script src="public/common/cookie.js"></script>-->
    <!--<script src="public/widget/slimscroll/slimscrollDirective.js"></script>-->
    <!--<script src="public/common/main.js"></script>-->
    <script src="loadAssets.php?urls=public/lib/jquery.js,public/common/minify/cookie.js,public/widget/slimscroll/minify/slimscrollDirective.js,public/common/minify/main.js"></script>
    <script>
        var dataUrl = "";
        var templateType = "";
        var templateOrderNo = "";
        var templateCallback = null;
        var service = null;
        $("#build-template").on("click", function() {
            $("#iframe")[0].contentWindow.Template.uploadTemplate(service, dataUrl, templateType, templateOrderNo, templateCallback);
            $("#close-preview-template").click();
        });
        $("#close-preview-template").on("click", function() {
            $("#tplPreview").html("");
            $("#tplPreview").css("display", "none");
        });
        window.htmlToPic = function(template, res, html, type, orderNo, templateService, callback) {
            html = template("", html)(res.data);
            var htmlEle = $("<div style='position:relative;top:80px'>" + html + "</div>");
            templateType = type;
            templateOrderNo = orderNo;
            templateCallback = callback;
            service = templateService;
            $("#tplPreview").append(htmlEle);
            $("#tplPreview").css("display", "block");
            $("#mask").outerHeight($("#tplPreview")[0].scrollHeight);
            html2canvas(htmlEle[0], {
                allowTaint: false,
                taintTest: false,
                height: htmlEle.outerHeight() + 220,
                onrendered: function(canvas) {
                    dataUrl = canvas.toDataURL();
                }
            });
        }
    </script>
</body>
</html>